<template>

  <!--  试图-->
  <div>

    <div id="data1" style="width: 400px;height: 400px">
      aaaaaaa
    </div>

    <div id="data2" style="width: 400px;height: 400px">
      bbbbbbb
    </div>



  </div>

</template>

<script>
import * as echarts from "echarts";

export default {
  name: "DataView",
  data() {
    return {
      //默认属性
      // ws: null,
      // url:"ws://localhost:9017/websocket",

    data:[],
    data1:[],

    }
  }, methods: {
    //自定义方法
    init(){
      //建立连接
      this.goEasy.connect({
        onSuccess: function () { //连接成功
          console.log("GoEasy connect successfully.") //连接成功
        },
        onFailed: function (error) { //连接失败
          console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
        }
      });
      //订阅消息
      let self = this;
      const pubsub = this.goEasy.pubsub;
      pubsub.subscribe({
        channel: "GoEasyealTimeData_0828",//替换为您自己的channel
        onMessage: function (message) {
          //收到消息
          // console.log("Channel:" + message.channel + " content:" + message.content);
          console.log("收到消息")
          let receivedData = message.content;
          self.initEcharts1(JSON.parse(receivedData).server);
          self.initEcharts2(JSON.parse(receivedData).pie);
        },
        onSuccess: function () {
          console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
          console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
        }
      });
      // this.ws = new WebSocket(this.url)
      // this.ws.onopen = this.websocketOnOpen;
      // this.ws.onmessage = this.websocketOnMessage;
    },
    // websocketOnOpen(){
    //   console.log("连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功连接成功")
    // },
    showRoleForm() {

      this.$nextTick(() => {
        this.initEcharts1();
      });
      this.$nextTick(() => {
        this.initEcharts2();
      });

    },
    // websocketOnMessage(datas){
    //   console.log(JSON.stringify(datas)); // 将整个事件对象转换为字符串并打印
    //   // 或者针对特定属性进行转换和打印
    //   console.log(JSON.stringify(datas.data));
    //   console.log(datas+"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
    //   if(datas.data !== "连接成功"){
    //     let res = JSON.parse(datas.data)
    //     if(res.type == 1){
    //       this.$message({
    //         type: "warning",
    //         message: res.msg
    //       })
    //     }else{
    //       this.initEcharts1(JSON.parse(datas.data).server);
    //       this.initEcharts2(JSON.parse(datas.data).pie);
    //     }
    //
    //   }
    // },
    initEcharts1(data) {
      this.data = JSON.stringify(data);
      this.data = JSON.parse(this.data)
      let value1 = []
      let value2 = []
      const chartDom = document.getElementById('data1');
      const myChart = echarts.init(chartDom);

        value1 = this.data.map(item => item.roleName);
        value2 = this.data.map(item => item.valueCount);

        const option = {
          xAxis: {
            type: 'category',
            data: value1  // 直接将获取到的角色名称数组赋值给 xAxis 的 data
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: value2,  // 将获取到的数量数组赋值给 series 的 data
              type: 'bar'
            }
          ]
        };
        option && myChart.setOption(option);
    },
    initEcharts2(pies) {
      console.log("websocket pies url"+JSON.stringify(pies))
      this.data1 = JSON.stringify(pies);
      this.data1 = JSON.parse(this.data1)

      let formData2 = []

      const chartDom = document.getElementById('data2');
      const myChart = echarts.init(chartDom);



        formData2 = this.data1.map(item => ({ name: item.roleName, value: item.valueCount }));


      const  option = {
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: formData2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        option && myChart.setOption(option);

    },

  }, mounted() {//初始化
    this.init();
      this.showRoleForm()
  }
}
</script>

<style>
#data1,
#data2 {
  float: left;
}
</style>